<!DOCTYPE html>
<html  lang="zh">
<head>
    <!-- hexo-inject:begin --><!-- hexo-inject:end --><meta charset="utf-8" />

<meta name="generator" content="Hexo 3.9.0" />

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

<title>SurfaceShader1-基础 - 游戏人生</title>


    <meta name="description" content="shade学习">
<meta name="keywords" content="学习">
<meta property="og:type" content="article">
<meta property="og:title" content="SurfaceShader1-基础">
<meta property="og:url" content="http://cloundgame.gitee.io/mystudy/2020/07/20/SurfaceShader1-基础/index.html">
<meta property="og:site_name" content="游戏人生">
<meta property="og:description" content="shade学习">
<meta property="og:locale" content="zh-CN">
<meta property="og:image" content="http://cloundgame.gitee.io/mystudy/images/og_image.png">
<meta property="og:updated_time" content="2020-07-20T10:17:42.202Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="SurfaceShader1-基础">
<meta name="twitter:description" content="shade学习">
<meta name="twitter:image" content="http://cloundgame.gitee.io/mystudy/images/og_image.png">







<link rel="icon" href="/mystudy/images/favicon.svg">


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.7.2/css/bulma.css">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.9.0/css/all.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu:400,600|Source+Code+Pro">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/atom-one-dark.css">


    
    
    
    <style>body>.footer,body>.navbar,body>.section{opacity:0}</style>
    

    
    
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery@1.6.8/dist/css/lightgallery.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/justifiedGallery@3.7.0/dist/css/justifiedGallery.min.css">
    

    
    

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/outdatedbrowser@1.1.5/outdatedbrowser/outdatedbrowser.min.css">


    
    
    
    

<link rel="stylesheet" href="/mystudy/css/back-to-top.css">


    
    

    
    
    
    

    
    
<link rel="stylesheet" href="/mystudy/css/progressbar.css">
<script src="https://cdn.jsdelivr.net/npm/pace-js@1.0.2/pace.min.js"></script>

    
    
    
        <script async="" src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    

    


<link rel="stylesheet" href="/mystudy/css/style.css"><!-- hexo-inject:begin --><!-- hexo-inject:end -->
</head>
<body class="is-3-column">
    <!-- hexo-inject:begin --><!-- hexo-inject:end --><nav class="navbar navbar-main">
    <div class="container">
        <div class="navbar-brand is-flex-center">
            <a class="navbar-item navbar-logo" href="/mystudy/">
            
                <img src="/mystudy/images/logo.svg" alt="SurfaceShader1-基础" height="28">
            
            </a>
        </div>
        <div class="navbar-menu">
            
            <div class="navbar-start">
                
                <a class="navbar-item"
                href="/mystudy/">主页</a>
                
                <a class="navbar-item"
                href="/mystudy/archives">日志</a>
                
                <a class="navbar-item"
                href="/mystudy/categories">分类</a>
                
                <a class="navbar-item"
                href="/mystudy/">关于</a>
                
            </div>
            
            <div class="navbar-end">
                
                    
                    
                    <a class="navbar-item" target="_blank" title="Download on GitHub" href="https://github.com/koliy/koliy.github.io">
                        
                        <i class="fab fa-github"></i>
                        
                    </a>
                    
                
                
                <a class="navbar-item is-hidden-tablet catalogue" title="目录" href="javascript:;">
                    <i class="fas fa-list-ul"></i>
                </a>
                
                
                <a class="navbar-item search" title="搜索" href="javascript:;">
                    <i class="fas fa-search"></i>
                </a>
                
            </div>
        </div>
    </div>
</nav>
    
    <section class="section">
        <div class="container">
            <div class="columns">
                <div class="column is-8-tablet is-8-desktop is-6-widescreen has-order-2 column-main"><div class="card">
    
    <div class="card-content article ">
        
        <div class="level article-meta is-size-7 is-uppercase is-mobile is-overflow-x-auto">
            <div class="level-left">
                <time class="level-item has-text-grey" datetime="2020-07-20T07:42:06.000Z">2020-07-20</time>
                
                <div class="level-item">
                <a class="has-link-grey -link" href="/mystudy/categories/SurfaceShader/">SurfaceShader</a>
                </div>
                
                
                <span class="level-item has-text-grey">
                    
                    
                    20 分钟 读完 (大约 2936 个字)
                </span>
                
                
                <span class="level-item has-text-grey" id="busuanzi_container_page_pv">
                    <i class="far fa-eye"></i>
                    <span id="busuanzi_value_page_pv">0</span>次访问
                </span>
                
            </div>
        </div>
        
        <h1 class="title is-size-3 is-size-4-mobile has-text-weight-normal">
            
                SurfaceShader1-基础
            
        </h1>
        <div class="content">
            <h2 id="Unity的表面着色器"><a href="#Unity的表面着色器" class="headerlink" title="Unity的表面着色器"></a><strong>Unity的表面着色器</strong></h2><p>unity认为把渲染流程分为顶点和像素的抽象层面是一种不易理解的抽象，不符合我们人类的思考方式，应该划分成表面着色器,光照模型，光照着色器。</p>
<a id="more"></a>
<ul>
<li>表面着色器<br>定义了模型表面的反射率，法线，高光等</li>
<li>光照模型<br>选择是使用兰伯特还是Blinn-Phone等模型</li>
<li>光照着色器<br>负责计算光照衰减,阴影等</li>
</ul>
<p>这样，绝大部分我们只需要和表面着色器打交道，例如混合纹理和颜色等。<br>光照模型可以是提前定义好的，我们只需要旋转哪种预定义的光照模型。<br>光照着色器一旦由系统实现后，更不会改动，从而大大减轻shader的工作量。</p>
<p><strong>描述:</strong></p>
<ul>
<li>“嘿，使用这些纹理填充颜色，使用这个法线纹理填充表面法线，使用兰伯特光照模型，其它的就不用我来设置了” </li>
<li>我们不需要考虑是使用前向渲染路径还是延迟渲染路径</li>
<li>场景中有多少光源，它们类型是什么，怎样处理这些光源，每个Pass需要处理多少个光源等问题</li>
</ul>
<h2 id="SurfaceShader"><a href="#SurfaceShader" class="headerlink" title="SurfaceShader"></a><strong>SurfaceShader</strong></h2><p>和顶点/片元着色器需要包含到Pass块中不同，表面着色器的CG代码是直接写在SubShader块中，unity会在背后自动生成多个Pass。</p>
<figure class="highlight javascript hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">SubShader &#123;</span><br><span class="line">	CGPROGRAM</span><br><span class="line">	</span><br><span class="line">	#pragma surface surf Lambert</span><br><span class="line">	#pragma target 3.0</span><br><span class="line">	</span><br><span class="line">	ENDCG</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="编译指令"><a href="#编译指令" class="headerlink" title="编译指令"></a><strong>编译指令</strong></h4><p>编译指令是我们和unity沟通的重要方式，用于告诉unity：用这个表面函数设置表面属性，用这个光照模型模拟光照，我们不需要阴影和环境光，不需要雾效.<br>编译指令最重要的作用是指明该表面着色器使用的<strong>表面函数</strong>和<strong>光照函数</strong>，并设置一些可选参数。<br>$$ \#pragma\   surface \   surf表面函数 \  lightModel(光照模型) \   [可选参数]$$</p>
<ul>
<li><strong>#pragma surface :</strong><br>指明该编译指令是用于定义表面着色器。</li>
<li><strong>surf</strong><br>指明使用的表面函数</li>
<li><strong>lightModel</strong><br>使用什么光照模型:Lambert, Blinn-Phong</li>
<li><strong>可选参数</strong><br>是否开启阴影，环境光等</li>
</ul>
<h4 id="表面函数"><a href="#表面函数" class="headerlink" title="表面函数"></a><strong>表面函数</strong></h4><p>表面着色器的优点在于抽象出了”表面”这一概念。一个对象的表面属性定义了它的反射率，光滑度，透明度等值。<br>表面函数就是用于定义这些表面属性的。</p>
<figure class="highlight javascript hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="hljs-keyword">void</span> surf(Input IN, inout SurfaceOutput o)</span><br><span class="line"><span class="hljs-keyword">void</span> surf(Input IN, inout SurfaceOutputStandard o)</span><br><span class="line"><span class="hljs-keyword">void</span> surf(Input IN, inout SurfaceOutputStandardSpecular o)</span><br></pre></td></tr></table></figure>

<p>SurfaceOutput,SurfaceOutputStandard,SurfaceOutputStandardSpecular都是unity内置的结构体，它们需要配合不同的光照模型使用。<br><strong>Input IN:</strong><br>用来设置各种表面属性，并把这些属性存储在输出结构体SurfaceOutput等，再传递给光照函数计算光照结果.</p>
<h4 id="光照函数"><a href="#光照函数" class="headerlink" title="光照函数"></a><strong>光照函数</strong></h4><p>光照函数会使用表面函数中设置的各种表面属性，来应用某些光照模型，进而模拟物体表面的光照效果。</p>
<h6 id="unity内置的光照函数"><a href="#unity内置的光照函数" class="headerlink" title="unity内置的光照函数"></a><strong>unity内置的光照函数</strong></h6><p><strong>基于物理的光照模型函数(UnityPBSLighting.cginc定义):</strong></p>
<ul>
<li>Standard</li>
<li>StandardSpecular</li>
</ul>
<p><strong>非基于物理的光照模型函数(Lighting.cginc):</strong></p>
<ul>
<li>Lambert</li>
<li>Blinn-Phong</li>
</ul>
<h6 id="自定义的光照函数"><a href="#自定义的光照函数" class="headerlink" title="自定义的光照函数"></a><strong>自定义的光照函数</strong></h6><p>我们也可以定义自己的光照函数。</p>
<figure class="highlight javascript hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">#pragma surface surf CustomLambert</span><br><span class="line"></span><br><span class="line"><span class="hljs-comment">//用于不依赖视角的光照模型，例如漫反射</span></span><br><span class="line">half4 LightingCustomLambert (SurfaceOutput s, half3 lightDir, half atten);</span><br><span class="line"><span class="hljs-comment">//用于依赖视角的光照模型,例如高光反射</span></span><br><span class="line">half4 LightingCustomLambert (SurfaceOutput s, half3 lightDir,half3 viewDir, half atten);</span><br></pre></td></tr></table></figure>

<h4 id="可选参数"><a href="#可选参数" class="headerlink" title="可选参数"></a><strong>可选参数</strong></h4><p>例如开启/设置透明度混合，透明度测试，指明自定义的顶点和颜色修改函数等。</p>
<h6 id="自定义的修改函数"><a href="#自定义的修改函数" class="headerlink" title="自定义的修改函数"></a><strong>自定义的修改函数</strong></h6><p>除了表面函数和光照模型外，表面着色器还可以支持其它两种自定义的函数：顶点修改函数，最后的颜色修改函数：<strong>vertex:myvert finalcolor:mycolor</strong></p>
<ul>
<li><strong>顶点修改函数</strong><br>顶点修改函数允许我们自定义一些顶点属性，例如把顶点颜色传递给表面函数，或是修改顶点位置，实现某些顶点动画等。</li>
<li><strong>颜色修改函数</strong><br>可以在颜色绘制到屏幕前，最后一次修改颜色值，例如实现自定义的雾效等</li>
</ul>
<h6 id="阴影"><a href="#阴影" class="headerlink" title="阴影"></a><strong>阴影</strong></h6><ul>
<li><strong>addshadow</strong><br>addshadow参数会为表面着色器生成一个阴影投射的Pass。通常可以设置FallBack来让unity直接找到ShadowCaster的pass。<br>对于一些进行了顶点动画，透明度测试的物体，就需要对阴影的投射进行特殊处理，来为它们产生正确的阴影。</li>
<li><strong>fullforwardshadows</strong><br>可以在前向渲染路径中支持所有光源类型的阴影。<br>默认情况unity值支持平行光的阴影效果，如果需要点光源或聚光灯在前向渲染中也有阴影，就需要添加此参数。</li>
<li><strong>noshadow</strong><br>禁用阴影</li>
</ul>
<h6 id="光照"><a href="#光照" class="headerlink" title="光照"></a><strong>光照</strong></h6><p>一些指令可以控制光照对物体的影响</p>
<ul>
<li><strong>noambient</strong><br>不应用任何环境光照或光照探针(light probe)</li>
<li><strong>novertexlights</strong><br>不应用任何逐顶点光照</li>
<li><strong>noforwardadd</strong><br>去掉所有前向渲染中的额外pass，这个shader只会支持一个逐像素的平行光，而其它的光源会按逐顶点或SH的方法计算光照。</li>
<li><strong>nolightmap</strong></li>
<li><strong>nofog</strong></li>
</ul>
<h6 id="控制代码的生成"><a href="#控制代码的生成" class="headerlink" title="控制代码的生成"></a><strong>控制代码的生成</strong></h6><p>可以控制由表面着色器自动生成的代码。<br>默认情况下，unity会为表面着色器生成相应的前向渲染路径，延迟渲染路径使用的Pass，这会导致生成的Shader文件较大，变体过多。<br>如果我们确定该表面折射器只会在某些渲染路径中使用，就可以使用exclude_path来告诉unity不需要为某些渲染路径生成代码!!!</p>
<ul>
<li><strong>exclude_path:deferred</strong></li>
<li><strong>exclude_path:forward</strong></li>
<li><strong>exclude_path:prepass</strong><br>不要为延迟渲染路径生成相应的Pass</li>
<li><strong>nometa</strong><br>取消对提取元数据的Pass的生成</li>
</ul>
<h4 id="结构体"><a href="#结构体" class="headerlink" title="结构体"></a><strong>结构体</strong></h4><p>一个表面着色器需要使用两个结构体：表面函数的输入结构体Input，以及存储了表面属性的结构体SurfaceOutput.</p>
<h6 id="Input结构体"><a href="#Input结构体" class="headerlink" title="Input结构体"></a><strong>Input结构体</strong></h6><p>Input结构体包含了许多表面属性的数据来源，Input支持很多内置的变量名，通过这些变量名，我们可以告诉unity需要使用的数据信息。<br>例如，包含主纹理和法线纹理的采样坐标属性：uv_MainTex,uv_BumpMap.<br>这些采样坐标必须以”uv”为前缀，或”uv2”表明使用次级纹理坐标集合。</p>
<table>
<thead>
<tr>
<th>变量</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td>float3 viewDir</td>
<td>包含了视角方向,可用于计算边缘光照等</td>
</tr>
<tr>
<td>使用COLOR语义定义的float4变量</td>
<td>包含了插值后的逐顶点颜色</td>
</tr>
<tr>
<td>float4 screenPos</td>
<td>包含了屏幕空间坐标，可用于反射或屏幕特效</td>
</tr>
<tr>
<td>float3 worldPos</td>
<td>包含世界空间下的坐标</td>
</tr>
<tr>
<td>float3 wroldRefl</td>
<td>包含了世界空间下的反射方向。前提是没有修改表面法线o.Normal</td>
</tr>
<tr>
<td>float3 wroldRefl;INTERNAL_DATA</td>
<td>如果修改了表面法线o.Normal,需要使用该变量告诉unity要基于修改后的法线计算世界空间下的反射方向，在表面函数中，需要使用WorldReflectionVector(IN,o.Normal)来得到世界空间下的反射方向</td>
</tr>
<tr>
<td>float3 worldNormal</td>
<td>包含了世界空间的法线方向。前提是没有修改表面法线o.Normal</td>
</tr>
<tr>
<td>float3 worldNormal;INTERNAL_DATA</td>
<td>同理，需要使用WorldNormalVector(IN,o.Normal)来得到世界空间下的法线方向</td>
</tr>
</tbody></table>
<p>我们只需要在Input结构体重按表格声明对应的变量即可，不需要自己计算各个变量，unity会在背后为我们准备好这些数据。</p>
<h6 id="SurfaceOutput结构体"><a href="#SurfaceOutput结构体" class="headerlink" title="SurfaceOutput结构体"></a><strong>SurfaceOutput结构体</strong></h6><p>此结构会作为表面函数的输出，随后作为光照函数的输入来进行各种光照计算。这个结构体里面的变量是提前就声明好的。不可以增加也不可以减少。可以在Lighting.cginc找到。</p>
<ul>
<li><strong>简单的，非基于物理的光照模型</strong></li>
</ul>
<figure class="highlight javascript hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">struct SurfaceOutput&#123;</span><br><span class="line">	fixed3 Albedo;</span><br><span class="line">	fixed3 Normal;</span><br><span class="line">	fixed3 Emission;</span><br><span class="line">	half Specular;</span><br><span class="line">	fixed Gloss;</span><br><span class="line">	fixed Alpha;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h6 id="SurfaceOutputStandard结构体"><a href="#SurfaceOutputStandard结构体" class="headerlink" title="SurfaceOutputStandard结构体"></a><strong>SurfaceOutputStandard结构体</strong></h6><p>在UnityPSBLighting.cginc中。</p>
<p>-<strong>基于物理的光照模型，用于默认的金属工作流程,对应Standard光照函数</strong></p>
<figure class="highlight javascript hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">struct SurfaceOutputStandard&#123;</span><br><span class="line">	fixed3 Albedo;  <span class="hljs-comment">//漫反射颜色</span></span><br><span class="line">	fixed3 Normal;  <span class="hljs-comment">//切线空间下的法线</span></span><br><span class="line">	fixed3 Emission;</span><br><span class="line">	half Metallic;  <span class="hljs-comment">//0=非金色，1=金属</span></span><br><span class="line">	half Smoothness; <span class="hljs-comment">//0=粗糙，1=光滑</span></span><br><span class="line">	half Occlusion; <span class="hljs-comment">//遮挡,默认1开启</span></span><br><span class="line">	fixed Alpha; <span class="hljs-comment">//透明度</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h6 id="SurfaceOutputStandardSpecular结构体"><a href="#SurfaceOutputStandardSpecular结构体" class="headerlink" title="SurfaceOutputStandardSpecular结构体"></a><strong>SurfaceOutputStandardSpecular结构体</strong></h6><p>在UnityPSBLighting.cginc中。<br>-<strong>基于物理的光照模型，用于高光工作流程,对应StandardSpecular光照函数</strong></p>
<figure class="highlight javascript hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">struct SurfaceOutputStandardSpecular&#123;</span><br><span class="line">	fixed3 Albedo;</span><br><span class="line">	fixed3 Specular;</span><br><span class="line">	fixed3 Normal;</span><br><span class="line">	half3 Emission;</span><br><span class="line">	half Smoothness;</span><br><span class="line">	half Occlusion;</span><br><span class="line">	fixed Alpha;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>使用上面其中一个结构体即可，这取决于我们选择使用的光照模型。<br>unity内置的光照模型有两种:</p>
<ul>
<li>简单的非基于物理的光照模型:Lambert,Blinn-Phong<br>通常使用SurfaceOutput结构体</li>
<li>基于物理的光照模型:Standard,StandardSpecular<br>通常使用SurfaceOutputStandard，SurfaceOutputStandardSpecular结构体。</li>
</ul>
<h4 id="结构体属性说明"><a href="#结构体属性说明" class="headerlink" title="结构体属性说明"></a><strong>结构体属性说明</strong></h4><h6 id="SurfaceOutput"><a href="#SurfaceOutput" class="headerlink" title="SurfaceOutput"></a><strong>SurfaceOutput</strong></h6><ul>
<li><strong>fixed3 Albedo</strong><br>对光源的反射率。通常由纹理采样和颜色属性的乘积计算而得</li>
<li><strong>fixed3 Normal</strong><br>表面法线方向</li>
<li><strong>fixed3 Emission</strong><br>自发光，使用类似的语句进行简单的颜色叠加:c.rgb += o.Emission;</li>
<li><strong>half Specular</strong><br>高光反射中的指数部分的系数，影响高光反射的计算，例如使用BlinnPhong光照函数，它会使用如下语句计算高光反射的强度:<br>float spec = pos(nh,s.Specular*128)* s.Gloss</li>
<li><strong>fixed Gloss</strong><br>高光反射中的强度系数，一般在包含高光反射的光照模型里使用。</li>
<li><strong>fixed Alpha</strong><br>透明通道，如果开启了透明度的话，会使用该值进行颜色混合。</li>
</ul>
<h2 id="例子"><a href="#例子" class="headerlink" title="例子"></a><strong>例子</strong></h2><figure class="highlight javascript hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br></pre></td><td class="code"><pre><span class="line">Shader <span class="hljs-string">"Unity Shaders Book/Chapter 17/Normal Extrusion"</span> &#123;</span><br><span class="line">	Properties &#123;</span><br><span class="line">		_ColorTint (<span class="hljs-string">"Color Tint"</span>, Color) = (<span class="hljs-number">1</span>,<span class="hljs-number">1</span>,<span class="hljs-number">1</span>,<span class="hljs-number">1</span>)</span><br><span class="line">		_MainTex (<span class="hljs-string">"Base (RGB)"</span>, <span class="hljs-number">2</span>D) = <span class="hljs-string">"white"</span> &#123;&#125;</span><br><span class="line">		_BumpMap (<span class="hljs-string">"Normalmap"</span>, <span class="hljs-number">2</span>D) = <span class="hljs-string">"bump"</span> &#123;&#125;</span><br><span class="line">		_Amount (<span class="hljs-string">"Extrusion Amount"</span>, Range(<span class="hljs-number">-0.5</span>, <span class="hljs-number">0.5</span>)) = <span class="hljs-number">0.1</span></span><br><span class="line">	&#125;</span><br><span class="line">	SubShader &#123;</span><br><span class="line">		Tags &#123; <span class="hljs-string">"RenderType"</span>=<span class="hljs-string">"Opaque"</span> &#125;</span><br><span class="line">		LOD <span class="hljs-number">300</span></span><br><span class="line">		</span><br><span class="line">		CGPROGRAM</span><br><span class="line">		</span><br><span class="line">		<span class="hljs-comment">// surf - which surface function.</span></span><br><span class="line">		<span class="hljs-comment">// CustomLambert - which lighting model to use.</span></span><br><span class="line">		<span class="hljs-comment">// vertex:myvert - use custom vertex modification function.</span></span><br><span class="line">		<span class="hljs-comment">// finalcolor:mycolor - use custom final color modification function.</span></span><br><span class="line">		<span class="hljs-comment">// addshadow - generate a shadow caster pass. Because we modify the vertex position, the shder needs special shadows handling.</span></span><br><span class="line">		<span class="hljs-comment">// exclude_path:deferred/exclude_path:prepas - do not generate passes for deferred/legacy deferred rendering path.</span></span><br><span class="line">		<span class="hljs-comment">// nometa - do not generate a “meta” pass (that’s used by lightmapping &amp; dynamic global illumination to extract surface information).</span></span><br><span class="line">		#pragma surface surf CustomLambert vertex:myvert finalcolor:mycolor addshadow exclude_path:deferred exclude_path:prepass nometa</span><br><span class="line">		#pragma target 3.0</span><br><span class="line">		</span><br><span class="line">		fixed4 _ColorTint;</span><br><span class="line">		sampler2D _MainTex;</span><br><span class="line">		sampler2D _BumpMap;</span><br><span class="line">		half _Amount;</span><br><span class="line">		</span><br><span class="line">		struct Input &#123;</span><br><span class="line">			float2 uv_MainTex;</span><br><span class="line">			float2 uv_BumpMap;</span><br><span class="line">		&#125;;</span><br><span class="line">		<span class="hljs-comment">//使用顶点法线对顶点位置进行膨胀，由于修改了顶点位置，因此为了产生正确阴影，需要addshadow参数告诉</span></span><br><span class="line">		<span class="hljs-comment">//unity要生成一个该表面着色器对应的阴影投射pass</span></span><br><span class="line">		<span class="hljs-keyword">void</span> myvert (inout appdata_full v) &#123;</span><br><span class="line">			v.vertex.xyz += v.normal * _Amount;</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="hljs-comment">//表面函数使用主纹理设置了表面属性中的反射率，并使用了法线纹理设置了表面法线方向</span></span><br><span class="line">		<span class="hljs-keyword">void</span> surf (Input IN, inout SurfaceOutput o) &#123;</span><br><span class="line">			fixed4 tex = tex2D(_MainTex, IN.uv_MainTex);</span><br><span class="line">			o.Albedo = tex.rgb;</span><br><span class="line">			o.Alpha = tex.a;</span><br><span class="line">			o.Normal = UnpackNormal(tex2D(_BumpMap, IN.uv_BumpMap));</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="hljs-comment">//光照函数实现了简单的兰伯特漫反射的光照模型。</span></span><br><span class="line">		half4 LightingCustomLambert (SurfaceOutput s, half3 lightDir, half atten) &#123;</span><br><span class="line">			half NdotL = dot(s.Normal, lightDir);</span><br><span class="line">			half4 c;</span><br><span class="line">			c.rgb = s.Albedo * _LightColor0.rgb * (NdotL * atten);</span><br><span class="line">			c.a = s.Alpha;</span><br><span class="line">			<span class="hljs-keyword">return</span> c;</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="hljs-comment">//最后的颜色修改函数中，使用了颜色参数对输出颜色进行调整</span></span><br><span class="line">		<span class="hljs-keyword">void</span> mycolor (Input IN, SurfaceOutput o, inout fixed4 color) &#123;</span><br><span class="line">			color *= _ColorTint;</span><br><span class="line">		&#125;</span><br><span class="line">		</span><br><span class="line">		ENDCG</span><br><span class="line">	&#125;</span><br><span class="line">	FallBack <span class="hljs-string">"Legacy Shaders/Diffuse"</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


        </div>
        
        <div class="level is-size-7 is-uppercase">
            <div class="level-start">
                <div class="level-item">
                    <span class="is-size-6 has-text-grey has-mr-7">#</span>
                    <a class="has-link-grey -link" href="/mystudy/tags/学习/">学习</a>
                </div>
            </div>
        </div>
        
        

        
        <div class="social-share"></div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-share.js@1.0.16/dist/css/share.min.css">
<script src="https://cdn.jsdelivr.net/npm/social-share.js@1.0.16/dist/js/social-share.min.js"></script>
        
    </div>
</div>





<div class="card card-transparent">
    <div class="level post-navigation is-flex-wrap is-mobile">
        
        <div class="level-start">
            <a class="level level-item has-link-grey  article-nav-prev" href="/mystudy/2020/07/21/shader学习24-基于物理的渲染/">
                <i class="level-item fas fa-chevron-left"></i>
                <span class="level-item">shader学习24-基于物理的渲染</span>
            </a>
        </div>
        
        
        <div class="level-end">
            <a class="level level-item has-link-grey  article-nav-next" href="/mystudy/2020/07/18/shader学习23-Unity中的渲染优化技术/">
                <span class="level-item">shader学习23-Unity中的渲染优化技术</span>
                <i class="level-item fas fa-chevron-right"></i>
            </a>
        </div>
        
    </div>
</div>


</div>
                




<div class="column is-4-tablet is-4-desktop is-3-widescreen  has-order-1 column-left ">
    
        
<div class="card widget">
    <div class="card-content">
        <nav class="level">
            <div class="level-item has-text-centered" style="flex-shrink: 1">
                <div>
                    
                        <img class="image is-128x128 has-mb-6" src="/mystudy/images/avatar2.jpg" alt="满头大汉老黄牛">
                    
                    
                    <p class="is-size-4 is-block">
                        满头大汉老黄牛
                    </p>
                    
                    
                    <p class="is-size-6 is-block">
                        游戏
                    </p>
                    
                    
                    <p class="is-size-6 is-flex is-flex-center has-text-grey">
                        <i class="fas fa-map-marker-alt has-mr-7"></i>
                        <span>火星</span>
                    </p>
                    
                </div>
            </div>
        </nav>
        <nav class="level is-mobile">
            <div class="level-item has-text-centered is-marginless">
                <div>
                    <p class="heading">
                        文章
                    </p>
                    <p class="title has-text-weight-normal">
                        70
                    </p>
                </div>
            </div>
            <div class="level-item has-text-centered is-marginless">
                <div>
                    <p class="heading">
                        分类
                    </p>
                    <p class="title has-text-weight-normal">
                        10
                    </p>
                </div>
            </div>
            <div class="level-item has-text-centered is-marginless">
                <div>
                    <p class="heading">
                        标签
                    </p>
                    <p class="title has-text-weight-normal">
                        3
                    </p>
                </div>
            </div>
        </nav>
        <div class="level">
            <a class="level-item button is-link is-rounded" href="https://github.com/koliy/" target="_blank">
                关注我</a>
        </div>
        
        
        <div class="level is-mobile">
            
            <a class="level-item button is-white is-marginless" target="_blank"
                title="Github" href="https://github.com/koliy/">
                
                <i class="fab fa-github"></i>
                
            </a>
            
        </div>
        
    </div>
</div>
    
        


    
        
<div class="card widget">
    <div class="card-content">
        <div class="menu">
            <h3 class="menu-label">
                分类
            </h3>
            <ul class="menu-list">
            <li>
        <a class="level is-marginless" href="/mystudy/categories/3D数学基础-图形与游戏开发/">
            <span class="level-start">
                <span class="level-item">3D数学基础:图形与游戏开发</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">3</span>
            </span>
        </a></li><li>
        <a class="level is-marginless" href="/mystudy/categories/AI/">
            <span class="level-start">
                <span class="level-item">AI</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">12</span>
            </span>
        </a></li><li>
        <a class="level is-marginless" href="/mystudy/categories/MySql/">
            <span class="level-start">
                <span class="level-item">MySql</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">1</span>
            </span>
        </a></li><li>
        <a class="level is-marginless" href="/mystudy/categories/SurfaceShader/">
            <span class="level-start">
                <span class="level-item">SurfaceShader</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">1</span>
            </span>
        </a></li><li>
        <a class="level is-marginless" href="/mystudy/categories/Unity/">
            <span class="level-start">
                <span class="level-item">Unity</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">1</span>
            </span>
        </a></li><li>
        <a class="level is-marginless" href="/mystudy/categories/git/">
            <span class="level-start">
                <span class="level-item">git</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">3</span>
            </span>
        </a></li><li>
        <a class="level is-marginless" href="/mystudy/categories/shade学习/">
            <span class="level-start">
                <span class="level-item">shade学习</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">33</span>
            </span>
        </a></li><li>
        <a class="level is-marginless" href="/mystudy/categories/xlua/">
            <span class="level-start">
                <span class="level-item">xlua</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">1</span>
            </span>
        </a></li><li>
        <a class="level is-marginless" href="/mystudy/categories/网络同步/">
            <span class="level-start">
                <span class="level-item">网络同步</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">10</span>
            </span>
        </a></li><li>
        <a class="level is-marginless" href="/mystudy/categories/设计模式/">
            <span class="level-start">
                <span class="level-item">设计模式</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">5</span>
            </span>
        </a></li>
            </ul>
        </div>
    </div>
</div>
    
        <div class="card widget">
    <div class="card-content">
        <div class="menu">
        <h3 class="menu-label">
            归档
        </h3>
        <ul class="menu-list">
        
        <li>
            <a class="level is-marginless" href="/mystudy/archives/2020/09/">
                <span class="level-start">
                    <span class="level-item">九月 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">1</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/mystudy/archives/2020/07/">
                <span class="level-start">
                    <span class="level-item">七月 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">23</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/mystudy/archives/2020/06/">
                <span class="level-start">
                    <span class="level-item">六月 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">17</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/mystudy/archives/2020/03/">
                <span class="level-start">
                    <span class="level-item">三月 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">2</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/mystudy/archives/2020/02/">
                <span class="level-start">
                    <span class="level-item">二月 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">4</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/mystudy/archives/2019/09/">
                <span class="level-start">
                    <span class="level-item">九月 2019</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">5</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/mystudy/archives/2019/08/">
                <span class="level-start">
                    <span class="level-item">八月 2019</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">18</span>
                </span>
            </a>
        </li>
        
        </ul>
        </div>
    </div>
</div>
    
        
<div class="card widget">
    <div class="card-content">
        <h3 class="menu-label">
            标签云
        </h3>
        <a href="/mystudy/tags/game/" style="font-size: 15px;">game</a> <a href="/mystudy/tags/git/" style="font-size: 10px;">git</a> <a href="/mystudy/tags/学习/" style="font-size: 20px;">学习</a>
    </div>
</div>

    
    
        <div class="column-right-shadow is-hidden-widescreen is-sticky">
        
            
<div class="card widget" id="toc">
    <div class="card-content">
        <div class="menu">
            <h3 class="menu-label">
                目录
            </h3>
            <ul class="menu-list"><li>
        <a class="is-flex" href="#Unity的表面着色器">
        <span class="has-mr-6">1</span>
        <span>Unity的表面着色器</span>
        </a></li><li>
        <a class="is-flex" href="#SurfaceShader">
        <span class="has-mr-6">2</span>
        <span>SurfaceShader</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#编译指令">
        <span class="has-mr-6">2.1</span>
        <span>编译指令</span>
        </a></li><li>
        <a class="is-flex" href="#表面函数">
        <span class="has-mr-6">2.2</span>
        <span>表面函数</span>
        </a></li><li>
        <a class="is-flex" href="#光照函数">
        <span class="has-mr-6">2.3</span>
        <span>光照函数</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#unity内置的光照函数">
        <span class="has-mr-6">2.3.1</span>
        <span>unity内置的光照函数</span>
        </a></li><li>
        <a class="is-flex" href="#自定义的光照函数">
        <span class="has-mr-6">2.3.2</span>
        <span>自定义的光照函数</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#可选参数">
        <span class="has-mr-6">2.4</span>
        <span>可选参数</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#自定义的修改函数">
        <span class="has-mr-6">2.4.1</span>
        <span>自定义的修改函数</span>
        </a></li><li>
        <a class="is-flex" href="#阴影">
        <span class="has-mr-6">2.4.2</span>
        <span>阴影</span>
        </a></li><li>
        <a class="is-flex" href="#光照">
        <span class="has-mr-6">2.4.3</span>
        <span>光照</span>
        </a></li><li>
        <a class="is-flex" href="#控制代码的生成">
        <span class="has-mr-6">2.4.4</span>
        <span>控制代码的生成</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#结构体">
        <span class="has-mr-6">2.5</span>
        <span>结构体</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#Input结构体">
        <span class="has-mr-6">2.5.1</span>
        <span>Input结构体</span>
        </a></li><li>
        <a class="is-flex" href="#SurfaceOutput结构体">
        <span class="has-mr-6">2.5.2</span>
        <span>SurfaceOutput结构体</span>
        </a></li><li>
        <a class="is-flex" href="#SurfaceOutputStandard结构体">
        <span class="has-mr-6">2.5.3</span>
        <span>SurfaceOutputStandard结构体</span>
        </a></li><li>
        <a class="is-flex" href="#SurfaceOutputStandardSpecular结构体">
        <span class="has-mr-6">2.5.4</span>
        <span>SurfaceOutputStandardSpecular结构体</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#结构体属性说明">
        <span class="has-mr-6">2.6</span>
        <span>结构体属性说明</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#SurfaceOutput">
        <span class="has-mr-6">2.6.1</span>
        <span>SurfaceOutput</span>
        </a></li></ul></li></ul></li><li>
        <a class="is-flex" href="#例子">
        <span class="has-mr-6">3</span>
        <span>例子</span>
        </a></li></ul>
        </div>
    </div>
</div>

        
        </div>
    
</div>

                




<div class="column is-4-tablet is-4-desktop is-3-widescreen is-hidden-touch is-hidden-desktop-only has-order-3 column-right is-sticky">
    
        
<div class="card widget" id="toc">
    <div class="card-content">
        <div class="menu">
            <h3 class="menu-label">
                目录
            </h3>
            <ul class="menu-list"><li>
        <a class="is-flex" href="#Unity的表面着色器">
        <span class="has-mr-6">1</span>
        <span>Unity的表面着色器</span>
        </a></li><li>
        <a class="is-flex" href="#SurfaceShader">
        <span class="has-mr-6">2</span>
        <span>SurfaceShader</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#编译指令">
        <span class="has-mr-6">2.1</span>
        <span>编译指令</span>
        </a></li><li>
        <a class="is-flex" href="#表面函数">
        <span class="has-mr-6">2.2</span>
        <span>表面函数</span>
        </a></li><li>
        <a class="is-flex" href="#光照函数">
        <span class="has-mr-6">2.3</span>
        <span>光照函数</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#unity内置的光照函数">
        <span class="has-mr-6">2.3.1</span>
        <span>unity内置的光照函数</span>
        </a></li><li>
        <a class="is-flex" href="#自定义的光照函数">
        <span class="has-mr-6">2.3.2</span>
        <span>自定义的光照函数</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#可选参数">
        <span class="has-mr-6">2.4</span>
        <span>可选参数</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#自定义的修改函数">
        <span class="has-mr-6">2.4.1</span>
        <span>自定义的修改函数</span>
        </a></li><li>
        <a class="is-flex" href="#阴影">
        <span class="has-mr-6">2.4.2</span>
        <span>阴影</span>
        </a></li><li>
        <a class="is-flex" href="#光照">
        <span class="has-mr-6">2.4.3</span>
        <span>光照</span>
        </a></li><li>
        <a class="is-flex" href="#控制代码的生成">
        <span class="has-mr-6">2.4.4</span>
        <span>控制代码的生成</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#结构体">
        <span class="has-mr-6">2.5</span>
        <span>结构体</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#Input结构体">
        <span class="has-mr-6">2.5.1</span>
        <span>Input结构体</span>
        </a></li><li>
        <a class="is-flex" href="#SurfaceOutput结构体">
        <span class="has-mr-6">2.5.2</span>
        <span>SurfaceOutput结构体</span>
        </a></li><li>
        <a class="is-flex" href="#SurfaceOutputStandard结构体">
        <span class="has-mr-6">2.5.3</span>
        <span>SurfaceOutputStandard结构体</span>
        </a></li><li>
        <a class="is-flex" href="#SurfaceOutputStandardSpecular结构体">
        <span class="has-mr-6">2.5.4</span>
        <span>SurfaceOutputStandardSpecular结构体</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#结构体属性说明">
        <span class="has-mr-6">2.6</span>
        <span>结构体属性说明</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#SurfaceOutput">
        <span class="has-mr-6">2.6.1</span>
        <span>SurfaceOutput</span>
        </a></li></ul></li></ul></li><li>
        <a class="is-flex" href="#例子">
        <span class="has-mr-6">3</span>
        <span>例子</span>
        </a></li></ul>
        </div>
    </div>
</div>

    
    
</div>

            </div>
        </div>
    </section>
    <footer class="footer">
    <div class="container1">
        <div class="level1">
            <div class="level-start1 has-text-centered-mobile1">
                <a class="footer-logo is-block has-mb-6" href="/mystudy/">
                

                
                </a>
                <p class="is-size-7">
                &copy; 2020 Koliy&nbsp;
                Powered by <a href="https://github.com/koliy/koliy.github.io" target="_blank">Hexo</a> & <a
                        href="https://github.com/ppoffice/hexo-theme-icarus" target="_blank">Icarus</a>
                
                <br>
                <span id="busuanzi_container_site_uv">
                共<span id="busuanzi_value_site_uv">0</span>个访客
                </span>
                
                </p>
            </div>
            <div class="level-end1">
            
            </div>
        </div>
    </div>
</footer>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.22.2/min/moment-with-locales.min.js"></script>
<script>moment.locale("zh-CN");</script>

<script>
var IcarusThemeSettings = {
    article: {
        highlight: {
            clipboard: true,
            fold: 'unfolded'
        }
    }
};
</script>


    <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.4/dist/clipboard.min.js" defer></script>



    
    
    
    <script src="/mystudy/js/animation.js"></script>
    

    
    
    
    <script src="https://cdn.jsdelivr.net/npm/lightgallery@1.6.8/dist/js/lightgallery.min.js" defer></script>
    <script src="https://cdn.jsdelivr.net/npm/justifiedGallery@3.7.0/dist/js/jquery.justifiedGallery.min.js" defer></script>
    <script src="/mystudy/js/gallery.js" defer></script>
    

    
    

<div id="outdated">
    <h6>Your browser is out-of-date!</h6>
    <p>Update your browser to view this website correctly. <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/">Update
            my browser now </a></p>
    <p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Close">&times;</a></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/outdatedbrowser@1.1.5/outdatedbrowser/outdatedbrowser.min.js" defer></script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        outdatedBrowser({
            bgColor: '#f25648',
            color: '#ffffff',
            lowerThan: 'flex'
        });
    });
</script>


    
    
<script src="https://cdn.jsdelivr.net/npm/mathjax@2.7.5/unpacked/MathJax.js?config=TeX-MML-AM_CHTML" defer></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    MathJax.Hub.Config({
        'HTML-CSS': {
            matchFontHeight: false
        },
        SVG: {
            matchFontHeight: false
        },
        CommonHTML: {
            matchFontHeight: false
        },
        tex2jax: {
            inlineMath: [
                ['$','$'],
                ['\\(','\\)']
            ]
        }
    });
});
</script>

    
    

<a id="back-to-top" title="回到顶端" href="javascript:;">
    <i class="fas fa-chevron-up"></i>
</a>
<script src="/mystudy/js/back-to-top.js" defer></script>


    
    

    
    
    
    

    
    
    
    
    

    


<script src="/mystudy/js/main.js" defer></script>

    
    <div class="searchbox ins-search">
    <div class="searchbox-container ins-search-container">
        <div class="searchbox-input-wrapper">
            <input type="text" class="searchbox-input ins-search-input" placeholder="想要查找什么..." />
            <span class="searchbox-close ins-close ins-selectable"><i class="fa fa-times-circle"></i></span>
        </div>
        <div class="searchbox-result-wrapper ins-section-wrapper">
            <div class="ins-section-container"></div>
        </div>
    </div>
</div>
<script>
    (function (window) {
        var INSIGHT_CONFIG = {
            TRANSLATION: {
                POSTS: '文章',
                PAGES: '页面',
                CATEGORIES: '分类',
                TAGS: '标签',
                UNTITLED: '(无标题)',
            },
            CONTENT_URL: '/mystudy/content.json',
        };
        window.INSIGHT_CONFIG = INSIGHT_CONFIG;
    })(window);
</script>
<script src="/mystudy/js/insight.js" defer></script>
<link rel="stylesheet" href="/mystudy/css/search.css">
<link rel="stylesheet" href="/mystudy/css/insight.css"><!-- hexo-inject:begin --><!-- Begin: Injected MathJax -->
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({"tex2jax":{"inlineMath":[["$","$"],["\\(","\\)"]],"skipTags":["script","noscript","style","textarea","pre","code"],"processEscapes":true},"TeX":{"equationNumbers":{"autoNumber":"AMS"}}});
</script>

<script type="text/x-mathjax-config">
  MathJax.Hub.Queue(function() {
    var all = MathJax.Hub.getAllJax(), i;
    for(i=0; i < all.length; i += 1) {
      all[i].SourceElement().parentNode.className += ' has-jax';
    }
  });
</script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js">
</script>
<!-- End: Injected MathJax -->
<!-- hexo-inject:end -->
    
</body>
</html>